<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	    <meta content="telephone=no" name="format-detection" />
		<title>收入管理</title>
		<link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
	</head>
	<style type="text/css">
		body{
			background-color: #F1F1F1;
		}
		input{
			border: none;
			outline: none;
		}
		.top-wrap{
			background-color: #D5D5D5;
			overflow: hidden;
			height: 3.6rem;
			box-sizing: border-box;
			padding: 0 0 0 1rem;
		}
		.inp-wrap{
			width: 80%;
			float: left;
			height: 2rem;
			border-radius: 2rem;
			background-color: #FFFFFF;
			margin-top: 0.8rem;
			position: relative;
		}
		.btn-search{
			width: 20%;
			float: right;
			height: 3.6rem;
			line-height: 3.6rem;
			text-align: center;
			color: #535353;
		}
		.inp-search{
			position: absolute;
			top: 50%;
			left: 2rem;
			transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
			width: 80%;
		}
		.tab-wrap{
			display: flex;
		}
		.tab{
			background-color: #FFFFFF;
			color: #000000;
			flex: auto;
			text-align: center;
			padding: 15px 0;
			border-bottom: 2px solid #D5D5D5;
		}
		.tab.active{
			color: #D9543B;
			border-bottom: 2px solid #D9543B;
		}
		.list{
			display: flex;
			padding: 15px 0;
			text-align: center;
			border-bottom: 1px solid #D5D5D5;
			font-size: 0.9rem;
			background-color: #FFFFFF;
		}
		.li{
			flex: 0 0 20%;
			position: relative;
		}
		.verti{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
		}
		.portrait{
			width: 3rem;
			height: 3rem;
			border-radius: 50%;
		}
		.name{
			margin-top: 5px;
		}
		.small{
			font-size: 0.9rem;
		}
		.money{
			font-size: 1rem;
		}
		.look{
			height: 2rem;
		}
		#con2{
			display: none;
		}
		
	</style>
	<body>
	@if($agent->pid == 0)
		<div class="tab-wrap">
			<div class="tab active" data-type="0">推广员({{$agents->count()}})</div>
			<div class="tab" data-type="1">玩家({{$users->count()}})</div>
		</div>
		<div id="con1">
			<div class="list">
				<div class="li">推广员ID</div>
				<div class="li">昵称</div>
				<div class="li">为我返利</div>
				<div class="li">可提佣金</div>
				<div class="li">明细</div>
			</div>
			@foreach($agents as $agt)
				<div class="list small">
					<div class="li"><div class="verti">{{$agt->id}}</div></div>
					<div class="li">
						<img class="portrait" src="{{$agt->avatar}}"/>
						<div class="name">{{$agt->realname}}</div>
					</div>
					<div class="li money"><div class="verti">￥{{$agent->agentForMyCash($agt)}}</div></div>
					<div class="li money"><div class="verti">￥{{$agt->money}}</div></div>
					<div class="li goLook" data-id="1" onclick="window.location.href='/mobile/agent/agent_info/{{$agt->id}}'">
						<div class="verti">
							<img class="look" src="{{asset('/imgs/look.png')}}"/>
						</div>
					</div>
				</div>
			@endforeach
		</div>
		<div id="con2">
			<div class="list">
				<div class="li">玩家ID</div>
				<div class="li">昵称</div>
				<div class="li">充值金额</div>
				<div class="li">为我返现</div>
				<div class="li">明细</div>
			</div>
			@foreach($users as $user)
				<div class="list small">
					<div class="li"><div class="verti">{{$user->userid}}</div></div>
					<div class="li">
						@if($user->headimg)<img class="portrait" src="{{$user->headimg}}">@else<img class="portrait" src="{{asset('/image/panda.jpg')}}">@endif
						<div class="name">@if($user->nickname) {{$user->nickname}} @else {{base64_decode($user->name)}} @endif</div>
					</div>
					<div class="li money"><div class="verti">￥{{$user->totalCost()}}</div></div>
					<div class="li money"><div class="verti">￥{{$agent->userForMyCash($user)}}</div></div>
					<div class="li goLook" data-id="1" onclick="window.location.href='/mobile/agent/user_info/{{$user->id}}'">
						<div class="verti">
							<img class="look" src="{{asset('/imgs/look.png')}}"/>
						</div>
					</div>
				</div>
			@endforeach
		</div>
	@else
		<div class="tab-wrap">
			<div class="tab" data-type="0">玩家({{$users->count()}})</div>
		</div>
		<div id="con1">
			<div class="list">
				<div class="li">玩家ID</div>
				<div class="li">昵称</div>
				<div class="li">充值金额</div>
				<div class="li">佣金返现</div>
				<div class="li">明细</div>
			</div>
			@foreach($users as $user)
				<div class="list small">
					<div class="li"><div class="verti">{{$user->userid}}</div></div>
					<div class="li">
						@if($user->headimg)<img class="portrait" src="{{$user->headimg}}">@else<img class="portrait" src="{{asset('/image/panda.jpg')}}">@endif
						<div class="name">@if($user->nickname) {{$user->nickname}} @else {{base64_decode($user->name)}} @endif</div>
					</div>
					<div class="li money"><div class="verti">￥{{$user->totalCost()}}</div></div>
					<div class="li money"><div class="verti">￥{{$agent->userForMyCash($user)}}</div></div>
					<div class="li goLook" data-id="1" onclick="window.location.href='/mobile/agent/user_info/{{$user->id}}'">
						<div class="verti">
							<img class="look" src="{{asset('/imgs/look.png')}}"/>
						</div>
					</div>
				</div>
			@endforeach
		</div>
	@endif	
		
	<script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('/js/Inertia.js')}}"></script>
    <script type="text/javascript" src="{{asset('/js/backHome.js')}}"></script>
	<script type="text/javascript">
		$('.tab').on('touchstart', function() {
			$(this).addClass('active')
			$(this).siblings().removeClass('active')	
			var type = $(this).attr('data-type')
			if (type == 0) {
				console.log('点击的推广员')
				$('#con1').show()
				$('#con2').hide()
			} else {
				console.log('点击的玩家')
				$('#con2').show()
				$('#con1').hide()
			}
		})
		$('.goLook').on('touchstart', function() {
			var myid = $(this).attr('data-id')
			console.log('查看---' + myid)
		})
		
	</script>
	</body>
</html>
